<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车辆租赁</title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
<script type="text/javascript"
	src="${root}/static/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
	<div id="app" class="container-fluid">
		<div class="col-md-2" style="margin-top: 20px">
			<input type="text" v-model="bsno" @keyup="search()"
				placeholder="请输入车牌关键字" class="form-control" />
		</div>
		<div class="col-md-2" style="margin-top: 20px">
			<button @click="all()"
				class="btn btn-default glyphicon glyphicon-search">所有车辆</button>
		</div>
		<table class="table">
			<caption>车辆列表</caption>
			<thead>
				<tr>
					<th>车牌号</th>
					<th>车辆类型</th>
					<th>车辆颜色</th>
					<th>车辆报价</th>
					<th>出租价格</th>
					<th>出租押金</th>
					<th>车辆描述</th>
					<th>车辆图片</th>
					<th>车辆状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.items">
					<td>{{item.bsno}}</td>
					<td>{{item.bstype}}</td>
					<td>{{item.bscolor}}</td>
					<td>{{item.bsprice}}元</td>
					<td>{{item.bsrent}}元/天</td>
					<td>{{item.bsdeposit}}元</td>
					<td>{{item.bsdesc}}</td>
					<td><img class="img-circle img-thumbnail"
						style="width: 50px; height: 50px;"
						:src="'/upload${root}/bus-'+item.bsno+item.bsimg+'?Math.random()'" />
					</td>
					<td>{{item.bsstatuszh}}</td>
					<td v-if="item.bsstatus == 201"><a @click="rent(item.bsno)"
						href="javascript:void(0);">
							<button class="btn btn-info">租赁</button>
					</a></td>
					<td v-if="item.bsstatus == 202"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">租赁中</button>
					</a></td>
					<td v-if="item.bsstatus == 203"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">维修中</button>
					</a></td>
					<td v-if="item.bsstatus == 204"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">车辆已停用</button>
					</a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="10">
						<ul class="pagination">
							<li><a href="javascript:void(0);" @click="list(1)">&laquo;</a></li>
							<li><a href="javascript:void(0);"
								@click="list(pager.begin-pager.step)">&larr;</a></li>
						</ul>
						<ul class="pagination" v-for="n in pager.end+1-pager.begin">
							<li :class="pager.begin+n-1==pager.index?'active':''"><a
								href="javascript:void(0);" @click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
							</li>
						</ul>
						<ul class="pagination">
							<li><a href="javascript:void(0);"
								@click="list(pager.begin+pager.step)">&rarr;</a></li>
							<li><a href="javascript:void(0);" @click="list(pager.page)">&raquo;</a></li>
						</ul>
					</td>
				</tr>
			</tfoot>
		</table>
		<div id="mymodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">标题</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">起租时间:</label>
								<div class="col-sm-4">
									<input type="text" id="rtbegin"
										onFocus="WdatePicker({readOnly:true,minDate:'%y-%M-%d',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
										class="form-control" required placeholder="请输入起租时间" />
								</div>
								<p class="col-sm-4 help-block">起租时间不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">归还时间:</label>
								<div class="col-sm-4">
									<input type="text" id="rtreturn"
										onFocus="WdatePicker({readOnly:true,minDate:'%y-%M-#\{%d+1\}',maxDate:'%y-%M-#\{%d+7\}',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
										class="form-control" required placeholder="请输入归还时间" />
								</div>
								<p class="col-sm-4 help-block">归还时间不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">超期价格:</label>
								<div class="col-sm-4">
									<input type="text" id="rtextprice" pattern="^[1-9]\d{4,9}$"
										class="form-control" required placeholder="请输入超期价格" />
								</div>
								<p class="col-sm-4 help-block">超期价格不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">身份证号:</label>
								<div class="col-sm-4">
									<select id="put"  class="selectpicker dropup form-control" @change="put()">
										<option  v-for="ct in ctids">{{ct}}</option>
									</select>
									<input type="text" id="ctid" class="form-control"
										@keyup="query()" required placeholder="请输入身份证号" />
								</div>
								<p class="col-sm-4 help-block">身份证号不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">租赁备注:</label>
								<div class="col-sm-4">
									<textarea id="rtdesc" rows="5" cols="10" class="form-control"
										required></textarea>
								</div>
								<p class="col-sm-4 help-block">租赁备注不能为空</p>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="submit" class="btn btn-default" value="确定"
										@click="save()" /> <input type="button" data-dismiss="modal"
										class="btn btn-default" value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				index : 1,
				size : 5,
				step : 10,
				bsno : "",
				pager : {},
				no : "",
				ctids : {}
			},
			methods : {
				list : function(index) {
					var self = this;
					self.index = index;
					var url = "${root}/bus/list?bsno=" + self.bsno + "&index="
							+ self.index + "&size=" + self.size + "&step="
							+ self.step;
					axios.get(url).then(function(res) {
						self.pager = res.data;
					});
				},
				search : function() {
					var self = this;
					self.index = 1;
					self.list(self.index);
				},
				all : function() {
					var self = this;
					self.bsno = "";
					self.index = 1;
					self.list(self.index);
				},
				rent : function(item) {
					var self = this;
					self.no = item;
					$("#title").text("创建租赁订单");
					$("#rtbegin").val("");
					$("#rtreturn").val("");
					$("#rtextprice").val("");
					$("#ctid").val("");
					$("#rtdesc").val("");
					$("#mymodal").modal("show");
					$("#put").hide();
				},
				save : function() {
					var count = 0;
					var self = this;
					var rtbegin = document.getElementById("rtbegin");
					var rtreturn = document.getElementById("rtreturn");
					var rtextprice = document.getElementById("rtextprice");
					var ctid = document.getElementById("ctid");
					var rtdesc = document.getElementById("rtdesc");

					if (rtbegin.validity.valueMissing) {
						rtbegin.setCustomValidity("起租时间不能为空");
					} else {
						rtbegin.setCustomValidity("");
						count++;
					}

					if (rtreturn.validity.valueMissing) {
						rtreturn.setCustomValidity("归还时间不能为空");
					} else {
						rtreturn.setCustomValidity("");
						count++;
					}

					if (rtextprice.validity.valueMissing) {
						rtextprice.setCustomValidity("超期价格不能为空");
					} else if (rtextprice.validity.patternMismatch) {
						rtextprice.setCustomValidity("超期价格必须是5到10位有效数字");
					} else {
						rtextprice.setCustomValidity("");
						count++;
					}

					if (ctid.validity.valueMissing) {
						ctid.setCustomValidity("身份证号码不能为空");
					} else {
						ctid.setCustomValidity("");
						count++;
					}

					if (rtdesc.validity.valueMissing) {
						rtdesc.setCustomValidity("租赁备注不能为空");
					} else {
						rtdesc.setCustomValidity("");
						count++;
					}

					if (count == 5) {
						var url = "${root}/rent/add";
						var fd = new FormData();
						fd.append("rtbegin", rtbegin.value);
						fd.append("rtreturn", rtreturn.value);
						fd.append("rtextprice", rtextprice.value);
						fd.append("rtctid", ctid.value);
						fd.append("rtdesc", rtdesc.value);
						fd.append("no", self.no);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#mymodal").modal("hide");
							self.list(self.index);
						});
					}
				},
				query : function() {
					var self = this;
					var ctid = $("#ctid").val();
					if (ctid != "" && ctid.length != 0) {
						var url = "${root}/rent/queryCtid?ctid=" + ctid;
						axios.get(url).then(function(res) {
							self.ctids = res.data;
							$("#put").show();
						});
					}else{
						 $("#put").hide();
					}
				},
				put:function(){
					 $("#ctid").val($("#put").val());
					 $("#put").hide();
				}
			},
			mounted : function() {
				$("#put").hide();
				this.list(this.index);
			}
		})
	</script>
</body>
</html>
